<template>
	<view>
		<!-- 自定义组件：登录 -->
		<uni-transition mode-class="slide-left" :show="!status">
			<xz-login :status='status' @letFatherChangeStatus='changeIsLogin' @goRegister='comfrim' :isLogin="isLogin"></xz-login>
		</uni-transition>
		
		<!-- 自定义组件：注册 -->
		<uni-transition mode-class="slide-right" :show="status">
			<xz-register :status='status' @goToLogin='comfrim'></xz-register>
		</uni-transition>
		
		<!-- 个人中心 -->
			<view class="userInfo" v-if="isLogin">
				<image class="avatar" src="../../static/img/avatar.jpg" mode="widthFix"></image>
				<view class="userInfoContainer">
					<view class="userInfoText">
						<view>
						<text>用户名：</text>
						<text>123</text>
						</view>
						<button class="change" type="primary" size="mini"  @click="check">修改</button>
					</view>
					<view class="userInfoText">
						<view>
						<text>邮箱：</text>
						<text>525870736@qq.com</text>
						</view>
						<button class="change" type="primary" size="mini">修改</button>
					</view>
					<view class="userInfoText">
						<view>
						<text>性别：</text>
						<text>男</text>
						</view>
						<button class="change" type="primary" size="mini">修改</button>
					</view>
					<view class="userInfoText">
						<view>
						<text>手机号：</text>
						<text>17713559842</text>
						</view>
						<button class="change" type="primary" size="mini">修改</button>
					</view>
					
					<!-- 退出登录 -->
					<button style="margin: 200rpx 0 40rpx 0; background-color: #0AA1ED;" type="primary" @click="loginOut">退出登录</button>
				</view>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status:true,
				isLogin:false,
			};
		},
		methods:{
			check(){
				console.log(this.isLogin);
			},
			loginOut(){
				this.isLogin=!this.isLogin
				getApp().globalData.isNotLogin=!getApp().globalData.isNotLogin
			},
			comfrim(status){
				this.status = !status
			},
			changeIsLogin(isLogin){
				this.isLogin= !isLogin
			}
		},
		onLoad() {
			
		}
	}
</script>

<style lang="scss">
	.userInfoText{
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #808080;
		padding: 20rpx;
		border-bottom: 1px solid #C0C0C0;
		margin-bottom: 10rpx;
	}
	.change{
		background-color: #0AA1ED;
		position: absolute;
		right: 10rpx;
	}
	.userInfoContainer{
		width: 80%;
		margin: 20rpx;
	}
	
	.userInfo{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 30rpx;
		box-shadow: 0 0 8rpx 0 #aaa;
		border-radius: 8rpx;
	}
.avatar{
	padding: 10rpx;
	border-radius: 12rpx;
	border: 1rpx solid #8F939C;
	width: 140rpx;
	margin: 40rpx 0;
}
</style>
